<template>
  <div :class="$style.container" v-analytics.pageview>
    <div
      :class="$style.navi"
       @click="goHome"
       v-analytics.click="{
         action: 'Home Click',
         category: 'Results Page',
       }"
      >
        <icon name="shouye" fontSize="24px" />
      <!-- <img src="~assets/common/home.png"> -->
    </div>
    <div :class="$style.payContent">
      <img src="~assets/orderConfirmation/orderSccuess.png">
      <label class="fz-18">Processed</label>
      <label class="fz-12">
      Please download Juanpi App to check if your payment succeed and Logistic details.Hurry Up! Or you might miss these deals!
      </label>
      <div :class="$style.button">
        <v-button
          type="danger"
          ghost
          v-analytics.click="{
            action: 'Download Click',
            category: 'Results Page',
            callback: download,
          }"
        >
          Download JUANPI APP
        </v-button>
      </div>
      <label class="fz-12">
        Your Juanpi Account:{{userName}}
      </label>
    </div>
    <div :class="$style.bottomContent">
      <img src="~assets/common/logo.png">
      <label class="fz-12" >Global Deals With Free Shipping</label>
    </div>
  </div>
</template>

<script>
import { toast, button, icon } from 'components'
import { auth } from 'utils'

export default {
  name: 'orderResult',
  components: {
    toast,
    vButton: button,
    icon,
  },
  data() {
    return {
      userName: auth.userInfo().userName,
    }
  },
  created() {
    const payload = this.$route.query
    if (payload.payNo) {
      this.$store.dispatch('validationPay', { payload })
    }
  },
  methods: {
    download() {
      location.href = 'http://in.juanpi.com/jump/go'
    },
    goHome() {
      this.$router.push({ path: '/' })
    },
  },
}
</script>

<style lang="scss" module>
.container {
  background-color: #fff;
}

.navi {
  display: flex;
  flex-direction: row;
  justify-content:flex-end;
  padding-top: 12px;
  padding-right: 12px;
  img {
    width: 30px;
    height: 30px;
  }
}

.payContent {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content:center;
  padding-top: 80px;
  text-align:center;
  img {
    width: 104px;
    height: 104px;
    margin-left: auto;
    margin-right: auto;
  }
  label:nth-of-type(1) {
    padding-top: 16px;
  }
  label:nth-of-type(2) {
    padding-top: 16px;
    margin-left: 47px;
    margin-right: 47px;
    color: #9b9b9b;
  }
  label:nth-of-type(3) {
    padding-top: 16px;
    color: #9b9b9b;
  }
}

.button {
  padding-top: 32px;
  padding-left: 60px;
  padding-right: 60px;
}

.bottomContent {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: 12px;
  text-align:center;
  img {
    width: 48px;
    height: 48px;
    margin-left: auto;
    margin-right: auto;
    border-color: #9b9b9b;
    box-shadow: 0 0 3px #9b9b9b;
    border-radius: 10px !important;
  }
  label {
    padding-top: 12px;
    margin-left: auto;
    margin-right: auto;
    color: #4a4a4a;
  }
}


</style>
